// 导航菜单的间隔像素

    xuanran();

var menuCell = 5;
layui.use('element', function () {
    var element = layui.element;
    var $ = layui.jquery;
    $(".layui-tab-title li:nth-child(1) i").hide();
    //获取所有的菜单
    request('',{
        type: "GET",
        url: "/common/json/common.json",
        dataType: "json",
    },function (res) {
        var data = res;
        console.log("左侧导航栏"+data);
        var liStr = "";
        // 遍历生成主菜单
        for (var i = 0; i < data.length; i++) {
            // 判断是否存在子菜单
            if (data[i].childMenus != null && data[i].childMenus.length > 0) {
                liStr += "<li class=\"layui-nav-item\"><a class=\"\" href=\"javascript:;\" data-src=\"" + data[i].url + "\" data-menuid=\"" + data[i].menuId + "\" data-title=\"" + data[i].name + "\"><i class=\"" + data[i].pic + "\" style=\"margin-right: 10px\"></i>" + data[i].name + "</a>\n" +
                    "<dl class=\"layui-nav-child\">\n";
                // 遍历获取子菜单
                for (var k = 0; k < data[i].childMenus.length; k++) {
                    liStr += getChildMenu(data[i].childMenus[k], 0);
                }
                liStr += "</dl></li>";
            } else {
                // if(data[i].name=='后台首页'){
                //     liStr += "<li class=\"layui-nav-item layui-this\"><a class=\"site-demo-active\" data-src=\"" + data[i].url + "\" data-menuid=\"" + data[i].menuId + "\" data-title=\"" + data[i].name + "\"><i class=\"" + data[i].pic + "\" style=\"margin-right: 10px\"></i>" + data[i].name + "</a></li>";
                // }else{
                    liStr += "<li class=\"layui-nav-item\"><a class=\"site-demo-active\" data-src=\"" + data[i].url + "\" data-menuid=\"" + data[i].menuId + "\" data-title=\"" + data[i].name + "\"><i class=\"" + data[i].pic + "\" style=\"margin-right: 10px\"></i>" + data[i].name + "</a></li>";
                // }
            }
        };
        $(".navBar").html("<ul class=\"layui-nav layui-nav-tree\"  lay-filter=\"test\">\n" + liStr + "</ul>");
        element.init();
    })
});

// 递归生成子菜单
function getChildMenu(subMenu, num) {
    num++;
    var subStr = "";
    if (subMenu.childMenus != null && subMenu.childMenus.length > 0) {
        subStr += "<dd><ul><li class=\"layui-nav-item\" ><a style=\"margin-Left:" + num * menuCell + "px\" class=\"site-demo-actives\" href=\"javascript:;\" data-src=\"" + subMenu.url + "\" data-menuid=\"" + subMenu.menuId + "\" data-title=\"" + subMenu.name + "\">" + subMenu.name + "</a>" +
            "<dl class=\"layui-nav-child\">\n";
        for (var j = 0; j < subMenu.childMenus.length; j++) {
            subStr += getChildMenu(subMenu.childMenus[j], num);
        }
        subStr += "</dl></li></ul></dd>";
    } else {
        subStr += "<dd><a style=\"margin-Left:" + num * menuCell + "px\" class=\"site-demo-active\" data-src=\"" + subMenu.url + "\" data-menuid=\"" + subMenu.menuId + "\" data-title=\"" + subMenu.name + "\">" + subMenu.name + "</a></dd>";
    }
    return subStr;
}

function xuanran() {
    layui.use(['element', 'layer'], function () {
        var element = layui.element;
        var $ = layui.jquery;

        var active = {
            //在这里给active绑定几项事件，后面可通过active调用这些事件
            tabAdd: function (url, id, title) {
                //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                // var body_url = "pages/" + url + ".html";
                var body_url = url;
                // console.log("要切换的页面地址=" + body_url);
                element.tabAdd('bodyTab', {
                    title: title,
                    content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + body_url + '"></iframe>',
                    id: id //规定好的id
                })
                FrameWH();  //计算ifram层的大小
            },
            tabChange: function (id) {
                //切换到指定Tab项
                element.tabChange('bodyTab', id); //根据传入的id传入到指定的tab项
            },
            tabDelete: function (id) {
                element.tabDelete('bodyTab', id);//删除
            }
        };
        // //当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
        $(document).on('click','.site-demo-active', function () {
            var dataid = $(this);
            if (dataid.children().length <= 1) {
                if ($(".layui-tab-title li[lay-id]").length <= 0) {
                    //如果比零小，则直接打开新的tab项
                    active.tabAdd(dataid.attr("data-src"), dataid.attr("data-menuId"), dataid.attr("data-title"));
                } else {
                    //否则判断该tab项是否以及存在
                    var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                    $.each($(".layui-tab-title li[lay-id]"), function () {
                        //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                        if ($(this).attr("lay-id") == dataid.attr("data-menuId")) {
                            // console.log("如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开");
                            isData = true;
                        }
                    })
                    if (isData == false) {
                        //标志为false 新增一个tab项
                        // console.log("新增一个tab项")
                        active.tabAdd(dataid.attr("data-src"), dataid.attr("data-menuId"), dataid.attr("data-title"));
                    }
                }
                //最后不管是否新增tab，最后都转到要打开的选项页面上
                active.tabChange(dataid.attr("data-menuId"));
            }

        });
    })
    // console.log("==列表添加完后再次执行渲染");
}

/*
* @todo 重新计算iframe高度
*/
function FrameWH() {
    var h = $(window).height() - 164;
    //console.log("高度问题=="+h);
    $("iframe").css("height", h + "px");
}